<template>
  <view class="category">
    <USearch></USearch>
    <view class="main">
      <view class="menus">
        <view
          :class="['menu-item',current===index?'active':''] "
          v-for="(item,index) in menus"
          @click="handleMenuSelect(index)"
          :key="item"
        >{{item}}</view>
      </view>
      <view class="content">
        <view
          class="goods-group"
          v-for="item1 in goods"
          :key="item1.cat_id"
        >
          <view class="goods-group-title">{{item1.cat_name}}</view>
          <view class="goods-group-content">
            <navigator
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :url="'/pages/goods_list/goods_list?cid='+item2.cat_id"
            >
              <u-image
                width="120rpx"
                height="120rpx"
                :src="item2.cat_icon"
              ></u-image>
              <view class="cat-name">{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 商品分类数据
      // categories: [],
      // 左侧标题选中索引
      current: 0,
      menus:[],
      goods:[]
    };
  },
  onLoad() {
    //定义全局变量
    this.categories = []
    // 获取数据
   this.getCategory()
   
  },
  
  methods: {
    // 发送请求获取分类数据
    //将获取到的 数据传到列表
  async  getCategory(){
  this.categories = await this.$u.http.get('/categories')
      
  this.menus = this.categories.map(item=>item.cat_name)
  this.goods = this.categories[this.current].children
 
 },
 //点击菜单切换
   handleMenuSelect(index){
     this.current = index
     this.goods = this.categories[this.current].children
   }
 

  },
};
</script>

<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    overflow: hidden;
    display: flex;
    .menus {
      width: 182rpx;
      overflow: auto;
      .menu-item {
        text-align: center;
        height: 74rpx;
        line-height: 74rpx;
        color: #666;
      }
      /* 选中的样式 */
      .active {
        color: #eb4450;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4rpx;
          height: 70%;
          background-color: #eb4450;
        }
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .goods-group {
        .goods-group-title {
          height: 74rpx;
          text-align: center;
          line-height: 74rpx;

          &::before,
          &::after {
            content: "/";
            margin: 0 10rpx;
            color: #ccc;
          }
        }

        .goods-group-content {
          display: flex;
          flex-wrap: wrap;
          navigator {
            width: 33.33%;

            display: flex;
            flex-direction: column;
            // 侧轴
            align-items: center;

            .cat-name {
            }
          }
        }
      }
    }
  }
}
</style>